<template>
  <table class="dw-form-table">
    <tbody>
      <tr>
        <td class="dw-td-label"><span class="required">接口地址</span></td>
        <td :colspan="3">
          <div style="display: flex">
            <el-input v-model="input" placeholder="Please input" />
            <el-select v-model="value" placeholder="Select" style="width: 320px; margin: 0 10px">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <el-button type="warning">解析WSDL</el-button>
            <el-button type="success">运行</el-button>
          </div>
        </td>
      </tr>
      <tr>
        <td class="dw-td-label">
          <span class="required">请求参数</span>
        </td>
        <td style="margin: 0; padding: 0">
          <input-param></input-param>
        </td>
      </tr>
      <tr>
        <td class="dw-td-label">
          <span class="required">执行结果</span>
        </td>
        <td style="margin: 0; padding: 0">
          <run-result></run-result>
        </td>
      </tr>
    </tbody>
  </table>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import OutputParam from '@/components/api-config-form/soap-api-form/components/output-param.vue';
import InputParam from '@/components/api-config-form/soap-api-form/components/input-param.vue';
import RunResult from '@/components/api-config-form/soap-api-form/components/run-result.vue';
defineOptions({
  name: 'SoapApiDebug',
});

const input = ref<string[]>();
const value = ref('');
const options = [
  {
    value: 'Option1',
    label: 'SOAP 1.1',
  },
  {
    value: 'Option2',
    label: 'SOAP 1.2',
  },
];
</script>
